<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="项目名称:">
        <el-input v-model="project.name" readonly />
      </el-form-item>
      <el-form-item label="项目描述:">
        <el-input v-model="project.description" readonly />
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-input v-model="project.createTime" readonly />
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="showImportDialog"
          v-hasPermi="['system:project:add']">导入文献</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['system:project:remove']">删除文献</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="startClassify"
          v-hasPermi="['system:project:export']">开始分类</el-button>
      </el-col>
    </el-row>

    <!-- 分类对话框 -->
    <el-dialog
      title="分类中..."
      :visible.sync="classifyDialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div style="text-align: center;">
        <!-- 进度条 -->
        <el-progress
          :percentage="percentage"
          :stroke-width="18"
          :text-inside="true"
          status="success"
          style="margin-bottom: 20px;"
        ></el-progress>
        <!-- 或者使用饼图 -->
        <!-- <div ref="pieChart" style="width: 100%; height: 200px;"></div> -->
        <p>正在处理分类，请稍候...</p>
      </div>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="deleteVisible"
      width="30%"
      append-to-body
    >
      <span>确认要从项目中删除选中的 {{ selectedLiteratureIds.length }} 篇文献吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 文献选择对话框 -->
    <el-dialog title="选择要导入的文献" :visible.sync="dialogVisible" width="70%" @close="handleDialogClose">

      <!-- 搜索和筛选区域 
      <div class="filter-container">
        <el-input v-model="listQuery.keyword" placeholder="文献标题/作者" style="width: 200px" class="filter-item"
          @keyup.enter.native="fetchLiteratureList" />
        <el-button type="primary" @click="fetchLiteratureList">搜索</el-button>
      </div>-->

      <!-- 文献表格 -->
      <el-table v-loading="loading" :data="literatureListAll" @selection-change="handleSelectionChange2">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="论文批次">
              <span>{{ props.row.batch }}</span>
            </el-form-item>
            <el-form-item label="文档ID">
              <span>{{ props.row.docId }}</span>
            </el-form-item>
            <el-form-item label="论文ID">
              <span>{{ props.row.paperId }}</span>
            </el-form-item>
            <el-form-item label="期刊代码">
              <span>{{ props.row.journalCode }}</span>
            </el-form-item>
            <el-form-item label="起始页码">
              <span>{{ props.row.startPage }}</span>
            </el-form-item>
            <el-form-item label="结束页码">
              <span>{{ props.row.endPage }}</span>
            </el-form-item>
            <el-form-item label="总页数">
              <span>{{ props.row.totalPageNum }}</span>
            </el-form-item>
            <el-form-item label="期刊ISSN号">
              <span>{{ props.row.issn }}</span>
            </el-form-item>
            <el-form-item label="论文CN号">
              <span>{{ props.row.cn }}</span>
            </el-form-item>
            <el-form-item label="期刊/书名">
              <span>{{ props.row.hostTitle }}</span>
            </el-form-item>
            <el-form-item label="发表年份">
              <span>{{ props.row.year }}</span>
            </el-form-item>
            <el-form-item label="期刊卷号">
              <span>{{ props.row.volume }}</span>
            </el-form-item>
            <el-form-item label="期刊期号">
              <span>{{ props.row.issue }}</span>
            </el-form-item>
            <el-form-item label="处理单元">
              <span>{{ props.row.processingUnit }}</span>
            </el-form-item>
            <el-form-item label="论文持有号">
              <span>{{ props.row.holdingNumber }}</span>
            </el-form-item>
            <el-form-item label="图书馆代码">
              <span>{{ props.row.libraryCode }}</span>
            </el-form-item>
            <!-- <el-form-item label="所属项目ID">
              <span>{{ props.row.projectId }}</span>
            </el-form-item> -->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="文献ID" align="center" prop="literatureId" />
      <el-table-column label="论文标题" align="center" prop="title" />
      <el-table-column label="论文关键词" align="center" prop="keyword" />
      <el-table-column label="论文批次号" align="center" prop="batch" />
      <el-table-column label="论文语言" align="center" prop="language" />
      <!-- <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['literature:literature:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['literature:literature:remove']">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

      <!-- 分页 -->
      <pagination v-show="totalAll > 0" :total="totalAll" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
        @pagination="fetchLiteratureList" />

      <!-- 对话框底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="importLoading" @click="handleImport">
          导入选中文献
        </el-button>
      </div>
    </el-dialog>


    <el-table v-loading="loading" :data="literatureList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="论文批次">
              <span>{{ props.row.batch }}</span>
            </el-form-item>
            <el-form-item label="文档ID">
              <span>{{ props.row.docId }}</span>
            </el-form-item>
            <el-form-item label="论文ID">
              <span>{{ props.row.paperId }}</span>
            </el-form-item>
            <el-form-item label="期刊代码">
              <span>{{ props.row.journalCode }}</span>
            </el-form-item>
            <el-form-item label="起始页码">
              <span>{{ props.row.startPage }}</span>
            </el-form-item>
            <el-form-item label="结束页码">
              <span>{{ props.row.endPage }}</span>
            </el-form-item>
            <el-form-item label="总页数">
              <span>{{ props.row.totalPageNum }}</span>
            </el-form-item>
            <el-form-item label="期刊ISSN号">
              <span>{{ props.row.issn }}</span>
            </el-form-item>
            <el-form-item label="论文CN号">
              <span>{{ props.row.cn }}</span>
            </el-form-item>
            <el-form-item label="期刊/书名">
              <span>{{ props.row.hostTitle }}</span>
            </el-form-item>
            <el-form-item label="发表年份">
              <span>{{ props.row.year }}</span>
            </el-form-item>
            <el-form-item label="期刊卷号">
              <span>{{ props.row.volume }}</span>
            </el-form-item>
            <el-form-item label="期刊期号">
              <span>{{ props.row.issue }}</span>
            </el-form-item>
            <el-form-item label="处理单元">
              <span>{{ props.row.processingUnit }}</span>
            </el-form-item>
            <el-form-item label="论文持有号">
              <span>{{ props.row.holdingNumber }}</span>
            </el-form-item>
            <el-form-item label="图书馆代码">
              <span>{{ props.row.libraryCode }}</span>
            </el-form-item>
            <!-- <el-form-item label="所属项目ID">
              <span>{{ props.row.projectId }}</span>
            </el-form-item> -->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="文献ID" align="center" prop="literatureId" />
      <el-table-column label="论文标题" align="center" prop="title" />
      <el-table-column label="论文关键词" align="center" prop="keyword" />
      <el-table-column label="论文批次号" align="center" prop="batch" />
      <el-table-column label="论文语言" align="center" prop="language" />
      <el-table-column label="论文分类" align="center" prop="classification" />
      <!-- <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['literature:literature:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['literature:literature:remove']">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<script>
import { getProject, listProjectLiterature,importProjectLiterature,removeLiterature} from "@/api/project/project";
import { listLiterature } from "@/api/literature/literature";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      project: {}, // 存储详情数据
      total: 0, // 总记录数
      literatureList: [],// 文献表格数据
      literatureListAll:[],// 全部文献表格数据
      totalAll: 0, // 全部文献总记录数
      selectedLiteratures: [], // 选中的文献
      dialogVisible: false, // 是否显示对话框
      importLoading: false, // 导入按钮加载状态
      deleteVisible: false, // 删除对话框是否显示
      selectedLiteratureIds: [], // 选中的文献ID
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        projectId: this.$route.query.projectId,
      },
      listQuery: {
        pageNum: 1,
        pageSize: 5
  
      },
      classifyDialogVisible: false,//分类相关
      percentage: 0,
      timer: null,
      multipleSelection: []


    };
  },
  created() {
    // 从路由参数获取projectId
    const projectId = this.$route.query.projectId;
    if (projectId) {
      this.getDetail(projectId);
      this.getList();
    }
  },
  computed: {
    // 是否多选
    multiple() {
      return this.selectedLiteratureIds.length === 0;
    }
  },
  methods: {
    startClassify() {
      // 显示对话框
      this.classifyDialogVisible = true
      this.percentage = 0
      
      // 清除之前的定时器
      if (this.timer) {
        clearInterval(this.timer)
      }
      
      // 模拟进度条增长
      this.timer = setInterval(() => {
        this.percentage += 3
        if (this.percentage >= 100) {
          clearInterval(this.timer)
          // 2秒后关闭对话框
          setTimeout(() => {
            this.classifyDialogVisible = false
            this.$message.success('分类完成!')
          }, 200)
        }
      }, 100)
      
      // 实际项目中这里应该是调用API
      // this.$axios.get('/api/classify').then(response => {
      //   clearInterval(this.timer)
      //   this.percentage = 100
      //   setTimeout(() => {
      //     this.classifyDialogVisible = false
      //     this.$message.success('分类完成!')
      //   }, 200)
      // })
    },

    // 显示导入对话框
    showImportDialog() {
      this.dialogVisible = true
      this.fetchLiteratureList()
    },
    // 处理选中文献变化
    handleSelectionChange2(val) {
      this.selectedLiteratures = val
    },

    // 处理导入操作
    handleImport() {
      this.importLoading = true
      const literatureIds = this.selectedLiteratures.map(item => item.literatureId)
      if (this.selectedLiteratures.length === 0) {
        this.$message.warning('请至少选择一篇文献')
        this.importLoading = false
        return
      }
      
      importProjectLiterature(this.queryParams.projectId, literatureIds).then(() => {
        this.$message.success('导入成功')
        this.dialogVisible = false
        this.getList()
      }).finally(() => {
        this.importLoading = false
      })
    },
    /** 查询文献列表 */
    getList() {
      this.loading = true;
      listProjectLiterature(this.queryParams).then(response => {
        this.literatureList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 获取详情数据
    getDetail(projectId) {
      this.loading = true;
      getProject(projectId).then(response => {
        this.project = response.data;
      }).finally(() => {
        this.loading = false;
      });
    },
    //查询全部文档列表
    fetchLiteratureList() {
      this.loading = true;
      listLiterature(this.listQuery).then(response => {
        this.literatureListAll = response.rows;
        this.totalAll = response.total;
        this.loading = false;
      });
    },
    //处理选中的文献
    handleSelectionChange(val) {
      this.selectedLiteratureIds = val
    },  
    // 点击删除按钮
    handleDelete() {
      if (this.selectedLiteratureIds.length === 0) {
        this.$message.warning("请先选择要删除的文献");
        return;
      }
      this.deleteVisible = true;
    },

    // 确认删除
    confirmDelete() {
      const literatureIds = this.selectedLiteratureIds.map(item => item.literatureId)
      removeLiterature(this.$route.query.projectId, literatureIds).then(response => {
        this.$message.success("删除成功");
        this.deleteVisible = false;
        // 触发父组件刷新数据
        this.getList();
      }).catch(error => {
        this.$message.error("删除失败：" + error.message);
      });
    }
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
};
</script>